<template>
	<div id="index">
		<div id="a">
			<el-carousel height="400px" style="text-align: center;">
				<el-carousel-item v-for="(item,index) in banners" :key="item">
					<!--        <img :src="'../assets/banner'+item+'.png'" alt="111">-->
					<template v-if="index == 3">
						<a href="http://123.56.179.131:8088/Areas/Zip/%E7%BB%83%E4%B9%A0%E7%9B%98.zip">
						<img :src="item" alt="加载失败" />
					</a>
					</template>
					<template v-else>
						<img :src="item" alt="加载失败" />
					</template>
					<!--        <h3>{{ item }}</h3>-->
				</el-carousel-item>
			</el-carousel>
		</div>
		<div class="content">
			<div class="index_con index_sub1">
				<div v-for="(item, index) in menus" :key="index" @click="skip(index)">
					<img id="logo" :src="item.icon" alt="加载失败" />
					<img hidden id="right" src="../assets/right.png" alt="加载失败" />
					<h3>{{ item.title }}</h3>
					<h4>{{ item.content }}</h4>
				</div>
			</div>
			<div class="index_sub2">
				<div class="index_tit">
					最新课程
					<span @click="courses">
						更多
						<img src="../assets/more.png" />
					</span>
				</div>
				<ul class="index_con">
					<li v-for="(item, index) in newVideoList" :key="index" @click="goDetail(item)">
						<div class="item" v-bind:style="{ backgroundImage: 'url(' + item.imagePath + ')' }">
							<span class="new">new</span>
							<span class="play">
								<img src="../assets/video_play.png" />
								{{ item.studyCount }}
							</span>
							<h2 class="clr">{{ item.resourceName }}</h2>
							<h5 class="clr">{{ item.subName }}</h5>
						</div>
					</li>
				</ul>
			</div>
			<div class="index_sub3">
			<div class="index_tit">
					热门课程
					<span @click="courses">更多<img src="../assets/more.png" /></span>
				</div>
				<ul class="index_con">
					<li v-for="(item, index) in hotVideoList" :key="index" @click="goDetail(item)">
						<div class="item" v-bind:style="{ backgroundImage: 'url(' + item.imagePath + ')' }">
							<span class="play">
								<img src="../assets/video_play.png" />
								{{ item.studyCount }}
							</span>
							<h2 class="clr">{{ item.resourceName }}</h2>
							<h5 class="clr">{{ item.subName }}</h5>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>

export default {
	name: 'Index',
	components: {
	},
	data() {
		return {
			banners: [require('@/assets/banner1.png'), require('@/assets/banner2.png'), require('@/assets/banner3.png'),require('@/assets/banner4.png')],
			menus: [
				{
					routerPath: '/compMock',
					icon: require('@/assets/quanzhenmoni.png'),
					title: '全真模拟',
					content: '随时练习真题、在线组卷'
				},
				{
					routerPath: '/finalQues',
					icon: require('@/assets/finalque.png'),
					title: '终极押题',
					content: '资深专家押题、名师点题'
				},
				{
					routerPath: '/wrongOrColl',
					icon: require('@/assets/mewrong.png'),
					title: '我的错题',
					content: '系统自动收录、练习错题'
				},
				{
					routerPath: '/collect',
					icon: require('@/assets/mecollect.png'),
					title: '我的收藏',
					content: '收藏难点题目、强化练习'
				},
				{
					routerPath: '/dailyPractice',
					icon: require('@/assets/daylian.png'),
					title: '每日一练',
					content: '每日任务打卡、巩固记忆'
				}
			],
			newVideoList: null,
			hotVideoList: null,
			read: 0
		};
	},
	created() {
		this.axios.get('/web/student/home/GetHotAndNewVideo').then(res => {
			this.newVideoList = res.newVideoList;
			this.hotVideoList = res.hotVideoList;
			this.read = res.read
		})
	},
	methods: {
		skip(val) {
			let url=this.menus[val].routerPath;
			this.$router.push(url);
		},
		courses() {
			this.$router.push('/course');
		},
		goDetail(val){
        this.$router.push({
          path:'/courseDetail',
          query:{
            resourceId: val.resourceId,
            subName: val.subName,
            chapterName: val.chapterName,
            subId: val.subId,
            navIndex: 0
          }
        })
      },
	}
};
</script>

<style scoped src="../style/index.css" />
